<template>
  <div class="card">
    <div class="card-header">
      <span></span>
      <p class="title">{{ title }}</p>
      <ul class="tab">
        <li
          v-for="(item, index) in tabs"
          :key="item.value || index"
          :class="{ active: currentTab === (item.value || item.label) }"
          @click="handleTabClick(item.value || item.label)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div v-if="showRightMore" class="card-header-more" @click="clickMore">
      更多<img
        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng479702ba48a34413be380d9ba4d26d47c051a4a092738d362caff10c73341fe1?noCache=true"
        alt="arrar-right"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from "vue"

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  tabs: {
    type: Array,
    required: true,
    default: () => [],
  },
  activeTab: {
    type: String,
    default: "",
  },
  showRightMore: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(["tab-change", "click-more"])

const currentTab = ref(
  props.activeTab || props.tabs[0]?.value || props.tabs[0]?.label || ""
)

const handleTabClick = (tabValue: string) => {
  if (currentTab.value !== tabValue) {
    currentTab.value = tabValue
    emits("tab-change", tabValue)
  }
}
const clickMore = () => {
  emits("click-more", "ok")
}
</script>

<style scoped>
.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-size: 100% 100%;
}
.card-header {
  display: flex;
  align-items: center;
}
.card-header span {
  display: inline-block;
  width: 4px;
  height: 18px;
  background: linear-gradient(135deg, #ff3f81 0%, #a43aff 100%);
  border-radius: 3px;
}
.card-header .title {
  height: 26px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 26px;
  text-align: left;
  font-style: normal;
  margin-left: 8px;
}
.card-header .tab {
  margin-left: 26px;
  display: flex;
  align-items: center;
}
.card-header .tab li {
  padding: 0px 9px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  height: 24px;
  line-height: 24px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-right: 8px;

  /* 添加过渡动画 */
  transition: all 0.3s ease;
  transform-origin: center;
}
.card-header .tab li.active {
  background: #fff1f6;
  border-color: #ff9ec0;
  color: #ff3f81;

  /* 添加选中状态的动画效果 */
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(255, 63, 129, 0.1);
}
.card-header .tab li:hover {
  border-color: #ff9ec0;
  color: #ff3f81;
  transform: translateY(-1px);
}
.card-header-more {
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
  text-align: left;
  font-style: normal;
  cursor: pointer;
}
.card-header-more img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
</style>
